<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight',
]
app.configParameters = {
  rotate: {
    min: -90,
    max: 90,
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right',
    },
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom',
    },
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos
      return map
    }, {}),
  },
  distance: {
    min: 0,
    max: 100,
  },
}
app.config = {
  rotate: 0, //90
  align: 'center', //left
  verticalAlign: 'middle',
  position: 'top', //insideBottom
  distance: 10, // 15
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance,
    }
    myChart.setOption({
      series: [
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
        {
          label: labelOption,
        },
      ],
    })
  },
}
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}', // {c}  {name|{a}}
  fontSize: 14,
  rich: {
    name: {},
  },
}

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: {
        setOption: (_) => {},
      },
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler: function (val) {
        this.setOptions(val)
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = {}
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData, true)
    },
    setOptions(chartData) {
      chartData.seriesData.forEach((element) => {
        element.label = labelOption
      })
      this.chart.clear()
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          backgroundColor: 'rgba(255,255,255,0.8)', //设置背景图片 rgba格式
          color: 'black',
          borderWidth: '1', //边框宽度设置1
        },
        legend: {
          data: ['工业企业', '公共机构', '其他'],
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['第一季度', '第二季度', '第三季度', '第四季度'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: chartData.seriesData,
      })
    },
  },
}
</script>
